<template>
    <div>
        
        <!-- 3 使用组件 -->
        <el-row>
            <!-- 分成左右两部分 -->
            <el-col :span="24">
           <div style="margin: 5px;background-color:white;height: 20vh;">
          <el-row>
            <template v-for="(item,index) in incolist">
              <el-col :span="6">
                <div style="margin: 20px;" @mouseover="changeBgColor(index,item)":class="{'boxshadow': item.flag}">
                  <el-card shadow="hover" style="position: relative;">
                    <div style="position: absolute;top: 0px;right: 0px;" v-if="item.flag">
                       <img src="../assets/biaoqi.png" alt="" style="height: 20px;width: 15px;">
                      </div>
                    <div style="display: flex;text-align: center;">
                      <i :class="item.icon" class="iconfont" style=" color:#4DBFFD; font-size: 35px;" ></i>
                     <div>
                      <div style="font-weight: 600;font-size: 20px;">{{item.count}}</div>
                      <div  class="text item" style="font-weight: 400;">
                       {{item.name}}
                      </div>
                     </div>
                    </div>
                  </el-card>
                </div>
                
              </el-col>
            </template>
          </el-row>
            
              

           </div>
            </el-col>
            
    

          </el-row>
<el-row>
  <el-col :span="17">
    <div style="margin: 5px;background-color:white;height: 70vh">
      <div id="main" style="width: 100%; height: 100%"></div>
      </div>
  </el-col>
  <el-col :span="7">
    <div style="margin-top: 5px;" >
      <el-calendar v-model="value" >
        <template slot="dateCell " slot-scope="{ date, data }">
          <div :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-")[2] }}
          </div>
        </template>
        

      </el-calendar>
    </div>

  </el-col>

   
</el-row>

      
    </div>
  </template>
  <script>
    // 1 导入需要使用的组件

     export default{
  

      data(){
        return{
          incolist:[{
            name:"总住户人数",
            icon:"icon-bangong",
            count:20,
            flag:false
          },
          {
            name:"公告数量",
            icon:"icon-icon-tongji",
            count:130,
            flag:false
          },{
            name:"未完成的工单数量",
            icon:"icon-shipin1",
            count:178,
            flag:false
          }],
          value: new Date(),
            imglist:[ require("@/assets/101.webp"),require("@/assets/102.webp"),require("@/assets/103.webp")
        ,  require("@/assets/104.webp"),  
        ],
        datelistinfo:[],
        data1:[],
       
      }
      },
      mounted() {
 
  },

      created(){

this.listdatainfo()
//因为接口赋值在外面收不要 所以使用一个这个来完成
// clearTimeout(this.timer);  //清除延迟执行
    this.timer = setTimeout(()=>{   //设置延迟执行
      this.drawChart();
    },1000);
   

    //统计工单的数量
    this.selectallincolist()

      },
      methods:{
    //  首页统计工单和..数量

   

    selectallincolist(){
      console.log("首页的数量统计")
 // incolist
      this.axios({
          url:this.$api+"/count/selectAll",
          dataType:"json",
            method:'get',
            params:{
            }
        }).then(res=>{
          console.log(res)

          for(var i=0;i<res.data.length;i++){
            this.incolist[i]["count"]=res.data[i]["count"]
          }
        }).catch(res=>{
          console.log(res)
        })


    },
    

        changeBgColor(index,item){
          for(var i=0;i<this.incolist.length;i++){
            this.incolist[i]["flag"]=false
          }
          this.incolist[index]["flag"]=true
          console.log("888888888")
        },
  
        listdatainfo(){
        console.log("工单数据")
        this.axios({
          url:this.$api+"/repairorderstatistics/selectAll",
          dataType:"json",
            method:'get',
            params:{
            }

        }).then(res=>{
          var list=[{stauid:1,count:[]},
          {stauid:2,count:[]},
          {stauid:3,count:[]},
          {stauid:4,count:[]}]
     for(var i=0;i<res.data.length;i++){
       var item=res.data[i]
       for(var j=0;j<list.length;j++){
        if(item.status==list[j].stauid){
          list[j]["count"].push(item.count)
        }
       }
            
     }
     

      this.datelistinfo=list
     this.data1=this.datelistinfo[0]["count"]


        }).catch(res=>{
          console.log(res)
        })
        },


        drawChart() {
          console.log(this.datelistinfo)
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
     let option = {
  title: {
    text: '工单统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['工单上报', '已指派', '进行中', '已完成']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sept','Oct','Nov','Dec']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '工单上报',
      type: 'line',
      // stack: 'Total',
      data:this.datelistinfo.length>0>0?this.datelistinfo[0].count:[0,0,0,0,0,0,0,0,0,0,0,0]
    },
    {
      name: '已指派',
      type: 'line',
      // stack: 'Total',
      data:this.datelistinfo.length>0?this.datelistinfo[1].count:[0,0,0,0,0,0,0,0,0,0,0,0]
    },
    {
      name: '进行中',
      type: 'line',
      // stack: 'Total',
      data:this.datelistinfo.length>0?this.datelistinfo[2].count:[0,0,0,0,0,0,0,0,0,0,0,0]
    },

    {
      name: '已完成',
      type: 'line',
      // stack: 'Total',
      data:this.datelistinfo.length>0?this.datelistinfo[3].count:[0,0,0,0,0,0,0,0,0,0,0,0]
    }
  ]
};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

  
           datelist(){
            console.log("888888888")
           }

      }
     }
  </script>
  <style scoped lang="less">
    body{
        height: 100%;
        font-family:"Times New Roman", Times, serif;
    }
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  
  /* * {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
} */

::v-deep .el-calendar {
    font-size: 10px;
    .next {
      border: none;
    }
    td {
      border: none;
    }
    .el-calendar-day {
      height: 42px !important;
      text-align: center;
      border: none;
    }
    .el-calendar__header {
      justify-content: space-between;
    }
    .is-selected {
      background-color: #1d8dd8;
      color: #fff;
    }
  


  }
    /* 卡片的样式 */
    .text {
                font-size: 10px;
                display: inline-block;
                transform: scale(0.7);
               
              
  }


  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
.boxshadow{
  box-shadow: 0px 0px 100px 0px #d3dce6;

}


  </style>